/* Following are the presentation styles -- edit away! */

html, body {margin: 0; padding: 0;}
/* Specify the sky background. */
html { background: #CCD5E5 url(sky.png); color: #000; font-size: 2em; }
/*
I've added an <img> tag to the body of the document for the mountain and for Perseus.  This positions both. 
I would have preferred to keep the images solely in the CSS, since they add nothing to the content of the slide show. Unfortunately, it didn't prove 
workable to leave them here.  Bits of the mountains kept getting cut off because the footer was too short.  Bits of Pegasus' legs kept getting cut off 
when the slide content wasn't long enough to reveal it all.  Eventually, I just decided it was easier to position them both.
*/
#bg { position: absolute; bottom: 0px; left: 0px; }
#perseus { position: absolute; top: 0px; right: 0px; }

/* Compensating for IE's lack of support for semi-transparent PNGs by using the * html bug to apply a white background in IE 6 and earlier only. */
* html #currentSlide { background-color: #FFFFFF; }

/* Make sure the slide content doesn't overlap Perseus - which would make it hard to read. */
.slide * { margin-right: 110px; }

:link, :visited { color: #00C; text-decoration: none; }
:visited, .external:visited { border-bottom: 1px dotted #1E691D; padding-right: 24px; background: url(check.gif) 100% 70% no-repeat; }
#controls:active { color: #88A !important; }
#controls:focus { outline: 1px dotted #227; }
h1, h2, h3, h4 { font-size: 100%; margin: 0; padding: 0; font-weight: inherit; }
ul, pre { margin: 0; line-height: 1em; }

blockquote, q { font-style: italic; }
blockquote { padding: 0.5em; margin: 0 1.5em 0.5em; font-size: 1em; border-left: 0.3em solid #888; }
blockquote p { margin: 0; text-indent: 2em; }

kbd { font-weight: bold; font-size: 1em; }
sup { font-size: smaller; line-height: 1px; }

.slide code { padding: 2px 0.25em; font-weight: bold; color: #533; }
.slide pre { padding: 0; margin: 0.25em 0 0.5em 0.5em; color: #533; font-size: 90%; }
.slide pre code { display: block; }
.slide ul { margin-left: 5%; margin-right: 7%; list-style: disc; }
.slide li { margin-top: 0.75em; margin-right: 0; }
.slide ul ul { line-height: 1; }
.slide ul ul li { margin: .2em; font-size: 85%; list-style: square; }
.slide img.leader { display: block; margin: 0 auto; }

div#header, div#footer { color: #000; font-family: Verdana, Helvetica, sans-serif; }

div#footer {  font-size: 0.5em; font-weight: bold; padding: 1em 0; }

#footer h1, #footer h2 { display: block; padding: 0; text-align:center; }
#footer h2 {font-style: italic;}

div.long {font-size: 0.75em;}
.slide h1 {
	position: absolute;
	top: 0.7em;
	left: 0px;
	z-index: 1;
	margin: 0;
	padding: 0.3em 0 0 50px;
	white-space: nowrap;
	font: bold 150%/1em Helvetica, sans-serif;
	text-transform: capitalize;
	color: #4800FF;
}
.slide h3 {font-size: 130%;}
h1 abbr {font-variant: small-caps;}

div#controls {position: absolute; left: 50%; bottom: 0; width: 50%; text-align: right; font: bold 0.9em Verdana, Helvetica, sans-serif;}

html>body div#controls {position: fixed; padding: 0 0 1em 0; top: auto;}
div#controls form { position: absolute; bottom: 0; right: 0; width: 100%; margin: 0; padding: 0; }
#controls #navLinks a { padding: 0; margin: 0 0.5em; border: none; color: #4800FF; cursor: pointer; }
#controls #navList { height: 1em; }
#controls #navList #jumplist { position: absolute; bottom: 0; right: 0; background: #DDD; color: #227; }

#currentSlide { text-align: center; 1em; font-size: 0.5em; color: #4800FF; background: url(white.png); }

#slide0 {padding-top: 3.5em; font-size: 90%;}
#slide0 h1 { position: static; margin: 1em 0 0; padding: 0; font: bold 2em Helvetica, sans-serif; white-space: normal; color: #4800FF; background: transparent; }
#slide0 h2 { font: bold italic 1em Helvetica, sans-serif; margin: 0.25em; }
#slide0 h3 { margin-top: 1.5em; font-size: 1.5em; }
#slide0 h4 { margin-top: 0; font-size: 1em; }

ul.urls {list-style: none; display: inline; margin: 0;}
.urls li {display: inline; margin: 0;}
.note {display: none;}
.external {border-bottom: 1px dotted gray;}
html>body .external {border-bottom: none;}

.incremental, .incremental *, .incremental *:after {color: #DDE; visibility: visible;}
img.incremental {visibility: hidden;}
.slide .current {color: #B02;}


/* diagnostics

li:after {content: " [" attr(class) "]"; color: #F88;}
 */